<!--
 * @Author: Leng
 * @Date: 2021-01-31 20:15:37
 * @Description: 
 * @FilePath: \vue-leng\src\noUse\demo\mine.vue
-->
<template>
<div>
  <div>
      <p @click="changeTheme('theme1')"></p>
      <p @click="changeTheme('theme2')"></p>
      <p @click="changeTheme('theme3')"></p>
  </div>
  <!-- demo   -->
  <div class="skContent">
      换肤Demo
      {{initConfig}}
      <div class="skBtn">btn</div>
      <div class="bgImg"></div>
  </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'mine',
  data () {
    return {
      title: '我的',
      showBack: false
    }
  },
  methods: {
    changeTheme (theme) {
      window.document.documentElement.setAttribute("data-theme", theme)
    }
  },
  mounted () {
    
  },
  computed: {
    ...mapGetters([
      'initConfig'
    ])
  },
}
</script>
<style scoped lang="scss">
  p{
    @include px2rem(width,100px);
    @include px2rem(height,100px);
    @include px2rem(margin,20px);
    float:left;
    cursor: pointer;
  }
  p:first-child{
    background-color:red;
  }
  p:nth-child(2){
    background-color:#652BF5;
  }
  p:last-child{
    background-color:deepskyblue;
  }
  .skContent{
    @include defaultBlock;
    @include bgcolor($background-color-theme);

    .skBtn{
      width: 30px;
      height: 20px;
      @include bgdcolor(yellow);
    }
    .bgImg{
      width: 100px;
      height: 100px;
      @include bgimg('');
    }
  }
</style>